<!-- 第一行样式 -->
<template>
  <el-row style="gap: 16px;" justify="center">
    <el-col id="hetong" class="block" @click="handleOnClickBlock('hetong')" :span="7">
      <NumberBlock title="合同" unit="">
        <el-row style="width: 100%;" justify="center">
          <el-col :span="11" justify="center">
            <LabelBlock name="金额（万元）" :value="hetongContent.value" :isUp="hetongContent.isUp"
              :changeValue="hetongContent.changeValue" />
          </el-col>
          <el-divider direction="vertical" style="height: 40px;" />
          <el-col :span="11">
            <LabelBlock name="数量（个）" :value="hetongContent.key" :isUp="hetongContent.isUp"
              :changeValue="hetongContent.changeValue" />
          </el-col>
        </el-row>
        <el-row style="width: 100%; height: 40px; margin: 3px 0;" justify="center">
          <el-col :span="11">
            <MonthsBar style="height: 40px; width: 150px; margin-left: 45px" colors="#185A56" :values="hetongContent.mounthsMoney" :gap="5.5" />
          </el-col>
          <el-col :span="11">
            <MonthsBar style="height: 40px; width: 150px; margin-left: 65px" colors="#FB8919" :values="hetongContent.mounthsValue" :gap="5.5"
              :unit="'个'" />
          </el-col>
        </el-row>
      </NumberBlock>
      <!-- <span class="tips">数据截止至{{ getDate() }}</span> -->
    </el-col>
    <el-col id="shoukuan" class="block" @click="handleOnClickBlock('shoukuan')" :span="3">
      <NumberBlock title="收款" unit="">
        <el-row style="width: 100%;" justify="center">
          <LabelBlock name="金额（万元）" :value="shoukuanContent.value" :isUp="shoukuanContent.isUp"
            :changeValue="shoukuanContent.changeValue" />
        </el-row>
        <el-row style="width: 100%; height: 40px; margin: 3px 0;" justify="center">
          <MonthsBar style="height: 40px; width: 150px; margin-left: 20px;" colors="#00BB7A" :values="shoukuanContent.mounthsValue"
            :gap="5.5" />
        </el-row>
      </NumberBlock>
      <!-- <el-divider style="margin: 1px 0;" /> -->
      <!-- <span class="tips">数据截止至{{ getDate() }}</span> -->
    </el-col>
    <el-col id="chanzhi" class="block" @click="handleOnClickBlock('chanzhi')" :span="3">
      <NumberBlock title="产值" unit="">
        <el-row style="width: 100%;" justify="center">
          <LabelBlock name="金额（万元）" :value="chanzhiContent.value" :isUp="chanzhiContent.isUp"
            :changeValue="chanzhiContent.changeValue" />
        </el-row>
        <el-row style="width: 100%; height: 50px; margin: 3px 0;" justify="center">
          <MonthsBar style="height: 40px; width: 150px; margin-left: 30px;" colors="#FF9502" :values="chanzhiContent.mounthsValue"
            :gap="5.5" />
        </el-row>
      </NumberBlock>
      <!-- <el-divider style="margin: 1px 0;" /> -->
      <!-- <span class="tips">数据截止至{{ getDate() }}</span> -->
    </el-col>
    <el-col id="xiangmu" class="block" @click="handleOnClickBlock('xiangmu')" :span="10">
      <NumberBlock title="项目" unit="">
        <el-row style="width: 100%;" justify="center">
          <el-col :span="7" justify="center">
            <LabelBlock name="入库（宗）" :value="xiangmuContent.rukuValue" />
          </el-col>
          <el-divider direction="vertical" style="height: 40px;" />
          <el-col :span="7">
            <LabelBlock name="出案（宗）" :value="xiangmuContent.chuanValue" />
          </el-col>
          <el-divider direction="vertical" style="height: 40px;" />
          <el-col :span="7">
            <LabelBlock name="拟收费（万元）" :value="xiangmuContent.nsfValue" />
          </el-col>
        </el-row>
        <el-row style="width: 100%; height: 40px; margin: 3px 0;" justify="center">
          <el-col :span="7">
            <MonthsBar style="height: 40px; width: 150px; margin-left: 20px;" colors="#e96063" :values="xiangmuContent.mounthsValue"
              :gap="5.5" :unit="'宗'" />
          </el-col>
          <el-col :span="7">
            <MonthsBar style="height: 40px; width: 150px; margin-left: 50px;" colors="#a3425a" :values="xiangmuContent.mounthsChuan"
              :gap="5.5" :unit="'宗'" />
          </el-col>
          <el-col :span="7">
            <MonthsBar style="height: 40px; width: 150px; margin-left: 70px;" colors="#8de8e9" :values="xiangmuContent.mounthsNsf"
              :gap="5.5" />
          </el-col>
        </el-row>
      </NumberBlock>
      <!-- <el-divider style="margin: 1px 0;" /> -->
      <!-- <span class="tips">数据截止至{{ getDate() }}</span> -->
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted, watch, reactive } from 'vue'
import { useScreenStore } from '@/store/useScreenStore';
import NumberBlock from '@/views/ScreenPage/component/FirstRow/NumberBlock.vue';
import LabelBlock from '@/views/ScreenPage/component/FirstRow/LabelBlock.vue';
import MonthsBar from '@/views/ScreenPage/component/FirstRow/MonthsBar.vue';
import { getMonthProjectPlannedCharge, getMonthProjectCaseCount, getProductionAmountChangeByYear, getProjectIndex, getMonthProjectNum, getReceiveAmount, getMonthReceiveAmount, getProductionAmount, getMonthProductionAmount, getHetongContent, getHetongContentChange } from '@/api/screenApi';

const store = useScreenStore();

const props = defineProps({ year: Number })

const mounthsValueDemo = ref([51, 63, 105, 63, 222, 124, 100, 60, 111, 105, 63, 40]);
const resetBlockBorder = () => {
  let blocks = document.getElementsByClassName('block');
  for (var i = 0; i < blocks.length; i++) {
    blocks[i].style.border = '1px solid #023270';
    blocks[i].style.boxShadow = 'none';
    blocks[i].style.transform = 'translateY(5px)';
  }
}

const handleOnClickBlock = (id) => {
  resetBlockBorder();
  let block = document.getElementById(id);
  block.style.border = '2px solid #023270';
  // block.style.boxShadow = '3px 3px 3px #D34947';
  block.style.boxShadow = '0 4px 6px -1px #023270';
  block.style.transform = 'translateY(-5px)';
  store.$patch({ selectLabel: id })
}
// 合同
const hetongContent = reactive({
  key: 0,
  value: 0,
  mounthsValue: [],
  mounthsMoney: [],
  isUp: false,
  changeValue: '',
});

const loadHetongData = () => {
  getHetongContent(props.year).then((res) => {
    hetongContent.key = res.data.data.key;
    hetongContent.value = res.data.data.value;
    console.log('1', res.data.data);
    console.log(hetongContent);
  });
  getHetongContentChange(props.year).then((res) => {
    if (Array.isArray(res.data.data)) {
      hetongContent.mounthsValue = res.data.data?.map(item => item.value);
    }
  });
  getProductionAmountChangeByYear(props.year).then((res) => {
    if (Array.isArray(res.data.data)) {
      hetongContent.mounthsMoney = res.data.data?.map(item => item.value);
    }
  });
}

// 收款
const shoukuanContent = reactive({
  value: 0,
  mounthsValue: [],
  isUp: false,
  changeValue: '',
});

const loadShoukuanData = () => {
  getReceiveAmount(props.year).then((res) => {
    shoukuanContent.value = res.data.data;
  });
  getMonthReceiveAmount(props.year).then((res) => {
    if (Array.isArray(res.data.data)) {
      shoukuanContent.mounthsValue = res.data.data?.map(item => item.value);
    }
    // 如果mouthsValue值都为0，则使用demo的值
    if (shoukuanContent.mounthsValue.every(item => item === 0)) {
      shoukuanContent.mounthsValue = mounthsValueDemo.value;
    }
  });
}
// 产值
const chanzhiContent = reactive({
  value: 0,
  mounthsValue: [],
  isUp: false,
  changeValue: '',
});

const loadChanzhiData = () => {
  getProductionAmount(props.year).then((res) => {
    chanzhiContent.value = res.data.data;
  });
  getMonthProductionAmount(props.year).then((res) => {
    if (Array.isArray(res.data.data)) {
      chanzhiContent.mounthsValue = res.data.data?.map(item => item.value);
    }
    // 如果mouthsValue值都为0，则使用demo的值
    if (chanzhiContent.mounthsValue.every(item => item === 0)) {
      chanzhiContent.mounthsValue = mounthsValueDemo.value;
    }
  });
}

// 项目
const xiangmuContent = reactive({
  rukuValue: 0,
  chuanValue: 0,
  nsfValue: 0,
  mounthsValue: [],
  mounthsChuan: [],
  mounthsNsf: [],
  isUp: false,
  changeValue: '',
});

const loadXiangmuData = () => {
  getProjectIndex(props.year).then((res) => {
    xiangmuContent.rukuValue = res.data.data?.key;
    xiangmuContent.chuanValue = res.data.data?.value;
    xiangmuContent.nsfValue = res.data.data?.nsf;
  });
  getMonthProjectNum(props.year).then((res) => {
    if (Array.isArray(res.data.data)) {
      xiangmuContent.mounthsValue = res.data.data?.map(item => item.value);

    }
    // 如果mouthsValue值都为0，则使用demo的值
    if (xiangmuContent.mounthsValue.every(item => item === 0)) {
      xiangmuContent.mounthsValue = mounthsValueDemo.value;
    }
  });
  getMonthProjectCaseCount(props.year).then((res) => {
    if (Array.isArray(res.data.data)) {
      xiangmuContent.mounthsChuan = res.data.data?.map(item => item.value);
    }
  });
  getMonthProjectPlannedCharge(props.year).then((res) => {
    if (Array.isArray(res.data.data)) {
      xiangmuContent.mounthsNsf = res.data.data?.map(item => item.value);
    }
  });
}

// const getDate = () => {
//   let date = new Date();
//   // 规范到YYYY年MM月DD日
//   return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
// }

const loadData = () => {
  loadHetongData();
  loadChanzhiData();
  loadShoukuanData();
  loadXiangmuData();
}

onMounted(() => {
  loadData();
  handleOnClickBlock(store.selectLabel)
});

watch(() => props.year, () => {
  loadData();
});
</script>

<style scoped>
.block {
  border: 1px solid #023270;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.block:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.block.active {
  transform: translateY(-5px);
  box-shadow: 0 4px 6px -1px #D34947;
  /* 点击后的上浮效果 */
}

.tips {
  color: #AEAEB2;
  margin-left: 5px;
  font-size: 14px;
  font-weight: 500;
}
</style>
